<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item><router-link to="/home">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">设备管理</a></a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="查询条件" style="width: 100%;">
      <a-form
        name="horizontal_login"
        layout="inline"
        autocomplete="off"
      >
        <a-form-item label="名称" name="name">
          <a-input v-model:value="name" name="name"></a-input>
        </a-form-item>
        <a-form-item>
          <a-button  type="primary" html-type="submit" @click="pageQuery">查询</a-button>
        </a-form-item>
      </a-form>
      <div style="margin-top:12px;">
        <a-button type="primary" @click="gotoAddPage" size="small">
          添加
        </a-button> &nbsp;&nbsp;
        <a-button size="small">
          修改
        </a-button>&nbsp;&nbsp;
        <a-button size="small">
          删除
        </a-button>&nbsp;&nbsp;
      </div>
    </a-card>
    <device-table ref="tableCompontent"></device-table>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import DeviceTable from './device-table.vue'

export default defineComponent({
  data () {
    return {
      name: null
    }
  },
  methods: {
    pageQuery () {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      this.$refs.tableCompontent && this.$refs.tableCompontent.pageQuery(this.name)
    },
    gotoAddPage () {
      this.$router.push('/device/device/form')
    }
  },
  setup () {
    return {
    }
  },
  components: {
    DeviceTable
  }
})
</script>
